<template>
  <view>
    <view class="tabs-view">
      <view class="keyword-view clearfix">
        <view class="float_left">
          <u-search
            :show-action="false"
            @clear="searchData()"
            @search="searchData()"
            :clearabled="true"
            placeholder="报损单号"
            v-model="search_form.no"
          ></u-search>
        </view>
        <view class="float_right" @click="openSel('search_show')"
          ><text class="custom-icon custom-icon-shaixuan"></text
        ></view>
      </view>
    </view>
    <view class="list-ul">
      <view
        class="list-li clearfix"
        v-for="(item, index) in outgoing_list"
        :key="index"
        @click="details(item.id)"
      >
        <view class="title clearfix">
          <view class="float_left" style="font-size: 28rpx; font-weight: 700">{{
            item.warehouseName || "--"
          }}</view>
          <view class="float_right">
            <span v-if="item.auditStatus === 1" class="warning-status"
              >待审核</span
            >
            <span v-else class="success-status">已审核</span>
          </view>
        </view>
        <view class="list-cont">
          <view class="list-cont-li"
            >日期：{{ $u.timeFormat(item.createTime, "yyyy-mm-dd") }}</view
          >
          <view class="list-cont-li clearfix">单号：{{ item.no }}</view>
          <view class="list-cont-li clearfix"
            >操作人：{{ item.operatorName }}</view
          >
          <view class="list-cont-li clearfix">SKU数：{{ item.skuNum }}</view>
          <view class="price">
            <text>{{ $utils.formattedNumber(item.amount) }}</text>
            <text class="custom-icon custom-icon-jinru"></text>
          </view>
        </view>
      </view>
      <u-popup v-model="search_show" mode="right">
        <view class="search-pop">
          <view class="form-view">
            <u-form label-width="160rpx" label-position="left">
              <u-form-item label-position="top" label="制单日期">
                <view class="date-li">
                  <picker mode="date" @change="bindDateStartChange">
                    <text class="date-li">{{
                      search_form.start
                        ? $u.timeFormat(search_form.start, "yyyy-mm-dd")
                        : "开始日期"
                    }}</text>
                  </picker>
                </view>
                <view class="date-line">-</view>
                <view class="date-li">
                  <picker mode="date" @change="bindDateEndChange">
                    <text class="date-li">{{
                      search_form.end
                        ? $u.timeFormat(search_form.end, "yyyy-mm-dd")
                        : "结束日期"
                    }}</text>
                  </picker>
                </view>
              </u-form-item>
              <u-form-item label="报损仓库">
                <view
                  class="clearfix form-val"
                  @click="goPage('/pagesT/werahouse/selWerahouse')"
                >
                  <text class="float_left ellipsis">{{
                    search_form.warehouseId ? warehouse_name : "请选择"
                  }}</text>
                  <view
                    class="float_right"
                    @click.stop="clearValue('warehouseId')"
                  >
                    <u-icon
                      :name="
                        !search_form.warehouseId
                          ? 'arrow-right'
                          : 'close-circle-fill'
                      "
                      size="28"
                      color="#999999"
                    ></u-icon>
                  </view>
                </view>
              </u-form-item>
              <u-form-item label="审核状态">
                <view class="clearfix form-val" @click="openFrom">
                  <text class="float_left ellipsis">{{
                    search_form.auditStatus ? audit_status_name : "请选择"
                  }}</text>
                  <view
                    class="float_right"
                    @click.stop="clearValue('auditStatus')"
                  >
                    <u-icon
                      :name="
                        !search_form.auditStatus
                          ? 'arrow-right'
                          : 'close-circle-fill'
                      "
                      size="28"
                      color="#999999"
                    ></u-icon>
                  </view>
                </view>
              </u-form-item>
            </u-form>
          </view>

          <view class="search-btn">
            <view class="btn-li btn-reset" @click="clearValue()">重置</view>
            <view class="btn-li btn-submit" @click="searchConfirm">确定</view>
          </view>
        </view>
      </u-popup>
      <addBtn
        v-if="$accessCheck($Access.LossReportAddLossReport)"
        url="/pagesT/stock/AddLoss"
      ></addBtn>
      <u-select
        @confirm="fromChange"
        v-model="from_show"
        :list="order_status"
      ></u-select>
      <view v-if="!outgoing_list.length" class="empty-view"
        ><u-empty text="暂无数据" mode="list"></u-empty
      ></view>
      <u-loadmore v-if="outgoing_list.length" :status="load_status" />
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      search_show: false,
      order_status: [
        {
          value: 2,
          label: "已审核",
        },
        {
          value: 1,
          label: "待审核",
        },
      ],
      load_status: "nomore",
      tabs_current: 0,
      page: 1,
      pageSize: 10,
      total: 0,
      source: 5, // 调拨出库 8; 销售出库 5; 采购退货 14;
      search_form: {
        no: "",
        warehouseId: "",
        auditStatus: "",
        start: "",
        end: "",
      },
      warehouse_name: "",
      outgoing_list: [],
      werahouseData: "",
      from_show: false,
      audit_status_name: "",
    };
  },
  watch: {
    werahouseData(val) {
      if (val) {
        this.search_form.warehouseId = val.id;
        this.warehouse_name = val.warehouseName;
      }
    },
  },
  onShow() {
    this.getAllReportLoss();
  },
  onReachBottom() {
    if (this.total / this.pageSize > this.page) {
      this.page += 1;
      this.getData();
    }
  },
  onPullDownRefresh() {
    this.searchData();
  },
  methods: {
    fromChange(e) {
      this.search_form.auditStatus = e[0].value;
      this.audit_status_name = e[0].label;
    },
    details(id) {
      uni.navigateTo({
        url: "/pagesT/stock/LossDetails?id=" + id,
      });
    },
    openSel(key) {
      this[key] = true;
    },
    bindDateStartChange(e) {
      this.search_form.start = this.$utils.timeByTimestamp(
        e.detail.value + " 00:00:00"
      );
    },
    bindDateEndChange(e) {
      this.search_form.end = this.$utils.timeByTimestamp(
        e.detail.value + " 23:59:59"
      );
    },
    // 搜索确定
    searchConfirm() {
      this.search_show = false;
      this.searchData();
    },
    // 重置搜索
    clearValue(params) {
      if (!params) {
        this.search_form = {
          no: "",
          warehouseId: "",
          auditStatus: "",
          start: "",
          end: "",
        };
        this.searchConfirm();
      } else {
        this.search_form[params] = "";
      }
    },
    getAllReportLoss() {
      this.load_status = "loading";
      this.$u.api
        .getAllReportLoss({
          page: this.page,
          pageSize: this.pageSize,
          no: this.search_form.no,
          star: this.search_form.start,
          end: this.search_form.end,
          warehouseId: this.search_form.warehouseId,
          auditStatus: this.search_form.auditStatus,
        })
        .then((res) => {
          console.log(res.data);
          if (this.page === 1) {
            this.outgoing_list = res.data;
          } else {
            this.outgoing_list = this.outgoing_list.concat(res.data);
          }
          this.total = res.pageTotal;
          this.load_status = this.$utils.loadStatus(
            this.page,
            this.pageSize,
            this.total
          );
        });
    },
    //  判断
    getData() {
      this.getAllReportLoss();
    },
    searchData() {
      this.page = 1;
      this.getData();
    },
    openFrom() {
      this.from_show = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.tabs-view {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 99;
  .keyword-view {
    padding: 20rpx 24rpx 0;
    background-color: #ffffff;
    z-index: 9;
    padding-bottom: 20rpx;

    .float_left {
      width: 640rpx;
    }

    .float_right {
      line-height: 64rpx;
      width: 50rpx;
      text-align: center;
      color: #666666;
    }
  }
}

.list-ul {
  padding-top: 100rpx;

  .list-li {
    width: 710rpx;
    margin: 20rpx auto;
    padding: 0 24rpx 20rpx;
    background-color: #ffffff;
    padding-bottom: 20rpx;
    border-radius: 20rpx;

    .title {
      line-height: 80rpx;
      border-bottom: 1px solid #eeeeee;

      .float_left {
        font-weight: bold;
      }

      .float_rigth {
        .custom-icon-jinru {
          margin-left: 10rpx;
          font-size: 28rpx;
        }
      }
    }

    .list-cont {
      margin-top: 10rpx;
      position: relative;

      .price {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0;
        font-weight: bold;
        color: $uni-color-error;

        .custom-icon-jinru {
          font-size: 28rpx;
          color: #6c6c6c;
          font-weight: 400;
        }
      }

      .list-cont-li {
        line-height: 40rpx;
        font-size: 24rpx;
        color: #666666;

        .mobile {
          color: $uni-color-primary;
        }
      }
    }
  }
}
.search-btn {
  .btn-reset {
    color: #fb5904 !important;
  }
  .btn-submit {
    background-color: #fb5904 !important;
  }
}
</style>
